import { Button, Card, Container, Dropdown, FormGroup, Form, Nav, Spinner } from 'react-bootstrap'
import proposals from '../store/proposals'
import { Navigate } from 'react-router-dom'
import auto from '../store/auto'
import { observer } from 'mobx-react-lite'
import { MakeAutoData, MakePersonData, MakeProposalData, Validated } from '../dtos'
import auth from '../store/auth'

function HandleClick() {
    const data = MakeProposalData(
        proposals.proposal.id,
        'DRAFT',
        auto.city[1],
        MakeAutoData(auto.category[1], auto.model[1]),
        MakePersonData(
            document.getElementById('firstName')?.value,
            document.getElementById('lastName')?.value,
            document.getElementById('driverLicense')?.value,
            document.getElementById('email')?.value
        )
    )
    const validate = Validated(data)
    if (validate) alert('неверно заполнено:\n' + validate)
    else {
        proposals.Rewrite(data)
        proposals.SetProposalData(proposals.proposal.id)
    }
}

export const ProposalPage = observer(() => {
    if (!auth.isLogIn) return <Navigate to='/home' />
    const num = parseInt(location.pathname.slice(11))
    if (proposals.list[0] == undefined) return <Navigate to='/proposals' />
    if (proposals.proposal == undefined) proposals.SetProposalData(proposals.list[num][1])
    return (
        (proposals.proposal != undefined && (
            <Container>
                <h1>Заявка {proposals.proposal.id}</h1>
                {proposals.proposal.status.code == 'DRAFT' && (
                    <>
                        <Nav>
                            <Dropdown className='me-2'>
                                <Dropdown.Toggle variant='dark'>{auto.category[0] || auto.category[1]}</Dropdown.Toggle>
                                <Dropdown.Menu>
                                    {auto.categories.map((i, k) => (
                                        <Dropdown.Item
                                            key={k}
                                            onClick={() => {
                                                auto.category = [i[0], i[1], i[2]]
                                                auto.model = []
                                                auto.SetModels(i[2])
                                            }}
                                        >
                                            {i[0]}
                                        </Dropdown.Item>
                                    ))}
                                </Dropdown.Menu>
                            </Dropdown>
                            <Dropdown className='me-2'>
                                <Dropdown.Toggle variant='dark'>
                                    {auto.model[0] || auto.model[1] || 'Модель'}
                                </Dropdown.Toggle>
                                <Dropdown.Menu>
                                    {auto.models.map((i, k) => (
                                        <Dropdown.Item key={k} onClick={() => (auto.model = [i[0], i[1]])}>
                                            {i[0]}
                                        </Dropdown.Item>
                                    ))}
                                </Dropdown.Menu>
                            </Dropdown>
                            <Dropdown>
                                <Dropdown.Toggle variant='dark'>{auto.city[0] || auto.city[1]}</Dropdown.Toggle>
                                <Dropdown.Menu>
                                    {auto.cities.map((i, k) => (
                                        <Dropdown.Item key={k} onClick={() => (auto.city = [i[0], i[1]])}>
                                            {i[0]}
                                        </Dropdown.Item>
                                    ))}
                                </Dropdown.Menu>
                            </Dropdown>
                        </Nav>
                        <Form>
                            <FormGroup className='mt-3'>
                                <Form.Control
                                    placeholder='Имя'
                                    defaultValue={proposals.proposal.person.firstName}
                                    id='firstName'
                                />
                            </FormGroup>
                            <FormGroup className='mt-3'>
                                <Form.Control
                                    placeholder='Фамилия'
                                    defaultValue={proposals.proposal.person.lastName}
                                    id='lastName'
                                />
                            </FormGroup>
                            <FormGroup className='mt-3'>
                                <Form.Control
                                    placeholder='Номер лицензии'
                                    defaultValue={proposals.proposal.person.driverLicense}
                                    id='driverLicense'
                                />
                            </FormGroup>
                            <FormGroup className='mt-3'>
                                <Form.Control
                                    placeholder='Email'
                                    defaultValue={proposals.proposal.person.email}
                                    id='email'
                                />
                            </FormGroup>
                        </Form>

                        <br />
                        <Nav>
                            <Button
                                variant='dark'
                                className='me-2'
                                onClick={() => {
                                    proposals.Delete(proposals.proposal.id)
                                }}
                            >
                                Удалить
                            </Button>
                            <Button variant='dark' className='me-2' onClick={HandleClick}>
                                Изменить
                            </Button>
                            <Button
                                variant='dark'
                                onClick={() => {
                                    proposals.Send(proposals.proposal.id)
                                }}
                            >
                                Отправить без изменений
                            </Button>
                        </Nav>
                    </>
                )}
                {proposals.proposal.status.code != 'DRAFT' && (
                    <Card className={proposals.proposal.status.code.toLocaleLowerCase()}>
                        <Card.Body>
                            <Card.Title>
                                {proposals.proposal.status.code == 'PENDING' && 'Заявка находится на рассмотрении'}
                                {proposals.proposal.status.code == 'SUCCESS' && 'Вы успешно зарегистрировали заявку'}
                                {proposals.proposal.status.code == 'REJECTED' && 'Ваша заявка отклонена'}
                            </Card.Title>
                            <Card.Text>
                                указанные данные:
                                <br />
                                {proposals.proposal.person.firstName}
                                <br />
                                {proposals.proposal.person.lastName}
                                <br />
                                {proposals.proposal.person.driverLicense}
                                <br />
                                {proposals.proposal.person.email}
                                <br />
                                {proposals.proposal.auto.autoCategory.code +
                                    ' ' +
                                    proposals.proposal.auto.model.code +
                                    ' ' +
                                    proposals.proposal.city.code}
                            </Card.Text>
                        </Card.Body>
                    </Card>
                )}
            </Container>
        )) || (
            <Container className='text-center'>
                <br />
                <Spinner />
            </Container>
        )
    )
})
